import React, { Component ,useRef } from 'react';
import { Dropdown, List, SearchBar, NavBar, Toast } from 'antd-mobile'
import "../../../assets/font_r9skc8oni9/iconfont.css"
import "../../../styles/Search.scss"
import * as service from "../../../api/index"
import store from '../../../store/index'
class Search extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            remenlist:[]
        }
    
    }
     

    async componentDidMount(){
        var res=await service.hotword_list()
        
        this.setState({remenlist:res.data.data})

       
    }

    qixiao() {
        
    }

    async search(val) {
        Toast.show(`${val}`)
        var res = await service.search_list({ count: 1, limitNum: 10, keyword: val })
        
        this.setState({ list: res.data.data })
        store.dispatch( { type:'ADD', payload: val } )
        
    }

    //升序排列
    shengxu(){
        
         this.state.list.sort((a,b)=>{
                return parseFloat(a.originprice) -  parseFloat(b.originprice)
             })
         this.setState({list:this.state.list})

    }
    //降序排列
    jiangxu(){
        this.state.list.sort((a,b)=>{
            return parseFloat(b.originprice) -  parseFloat(a.originprice)
         })
         this.setState({list:this.state.list})

    }
    //返回
    fanhui(){
        this.props.history.go(-1)
    }


    qixiao(){
        this.state.list=""
        this.setState({list:""})
    }
    render() {
 
        return (
        
            <div className='Search'>
                <div className='Myheader'>
                <span className='iconfont icon-youjiantou span1' onClick={()=>{this.fanhui()}}></span>
                 </div>
             
                 <div className='header'>
                        <SearchBar
                            onCancel={() => {
                                
                            }}
                            onClear={() => { this.qixiao() }}
                            onSearch={(val) => { this.search(val) }}
                            placeholder='请输入内容' showCancelButton />
                    </div>

       { this.state.list.length>0? 
        <div className='yemian1'>
                    
                    <div className='nav'>
                        <Dropdown highlight={true}>
                            <Dropdown.Item key='sorter' title='全部商品'>
                                <div style={{ padding: 12 }}>
                                    <div className='button' onClick={()=>{this.shengxu()}}>
                                            价格升序
                                    </div>
                                   <div className='button' onClick={()=>{this.jiangxu()}}> 价格降序</div>
                                   
                                </div>
                            </Dropdown.Item>
                            <Dropdown.Item key='bizop' title='筛选'>
                                <div style={{ padding: 12 }}>
                                    筛选内容
                                    <br />
                                    筛选内容
                                    <br />
                                    筛选内容
                                    <br />
                                </div>
                            </Dropdown.Item>
                        </Dropdown>
                    </div>
                    <div className='list'>
                        {
                            this.state.list&&this.state.list.map((item, index) => {
                                return (
                                    <div className='item' key={item.proid}>
                                        <img src={item.img1} alt="" />
                                        <div className='right'>
                                            <p>{item.proname}</p>
                                            <p className='p1'>￥{item.originprice}</p>
                                        </div>
                                    </div>
                                )
    
                            })
                        }
    
                    </div>
              </div> 
              :
    
                 <div className='yemian2'>
                    <div className='headerr'>历史记录</div>
                      <div className='sou' > 
                
                           {
                             store.getState().Search&&store.getState().Search.map((item,index)=>{
                                return (
                                    <div className='item' key={item.id}>{item.name}</div>
                                )
                             })
                           }
                        
              
                        
                        </div>
                        <div className='buttom'>热门搜索</div>
                        <div className='remen'>
                        {
                            this.state.remenlist.map((item,index)=>{
                                return (
                                    <div className='item'  key={index}>{item.keyword}</div>
                                )
                             })
                           }
                        
                        </div>
                 </div>
                    
                    
                    }
        
            </div>
        );
    }
    
}

export default Search;